import React, { useEffect, useContext, useState } from 'react';
import styled from 'styled-components';
import { Button, message, Popconfirm, Pagination } from 'antd';
import { EditOutlined, DeleteOutlined, ExclamationOutlined } from '@ant-design/icons';
import NewEmployee from './NewEmployee';
import AlertEmployee from './AlertEmployee';

const ContentTable = styled.div`
width:100%;
height:85%;
margin-top:20px;
box-sizing: border-box;
overflow:auto;
`;
const MyTable = styled.table`
border: 1px #dcdfe6 solid;
width: 100%;
padding-right: 0px;
`;
const MyTh = styled.th`
font-weight: lighter;
height: 40px;
line-height: 40px;
border-right: 1px solid #dcdfe6;
height: 40px;
line-height: 40px;
width:200px;
border-bottom: 1px solid #dcdfe6;
`;
const MyTd = styled.td`
padding:0;
font-weight: lighter;
height: 40px;
line-height: 40px;
border-right: 1px solid #dcdfe6;
height: 40px;
line-height: 40px;
width:200px;
border-bottom: 1px solid #dcdfe6;
text-align: center;
`;
//一行数据的组件
function MyTableRow(props: any)
{
    const confirm = async (emp_id: any) =>
    {
        props.DeleteEmp(emp_id);
    };
    const cancel = () =>
    {
        message.info("取消了");
    };

    const Alert = (emp_id: any) =>
    {
        return [props.AlertState[1](true), props.GetAlertId[1](emp_id)];
    };
    const resolvingDate = (date: Date) =>
    {
        //date是传入的时间
        let d = new Date(date);

        let month = (d.getMonth() + 1) < 10 ? '0' + (d.getMonth() + 1) : (d.getMonth() + 1);
        let day = d.getDate() < 10 ? '0' + d.getDate() : d.getDate();
        let hours = d.getHours() < 10 ? '0' + d.getHours() : d.getHours();
        let min = d.getMinutes() < 10 ? '0' + d.getMinutes() : d.getMinutes();
        let sec = d.getSeconds() < 10 ? '0' + d.getSeconds() : d.getSeconds();

        let times = d.getFullYear() + '-' + month + '-' + day;
        return times;
    };

    return (


        <tr>
            <MyTd>{props.item['id']}</MyTd>
            <MyTd>{props.item['name']}</MyTd>
            <MyTd>{props.item['gender']}</MyTd>
            <MyTd>{resolvingDate(props.item['birthday'])}</MyTd>
            <MyTd>{props.item['classroom']}</MyTd>
            <MyTd>{props.item['hobbit']}</MyTd>
            <MyTd>
                <Button onClick={() => { Alert(props.item['id']); }} icon={< EditOutlined />} style={{ color: "#40a9ff", border: "1px solid #40a9ff" }}>Alert</Button>
                <Popconfirm
                    title="Are you sure to delete this task?"
                    onConfirm={() => { confirm(props.item['id']); }}
                    onCancel={cancel}
                    okText="Yes"
                    cancelText="No"
                    placement="topRight"
                    icon={<ExclamationOutlined style={{ color: 'red' }} />}
                >
                    <Button danger style={{ marginLeft: '5px' }} icon={<DeleteOutlined />}>Delete</Button>
                </Popconfirm>
            </MyTd>
        </tr>
    );
}

export default function InfoTable(props: any)
{
    const [DeleteState, setDeleteState] = useState("");

    const { NewEmpState }: any = useContext(props.MyContext);

    const { AlertState }: any = useContext(props.MyContext);

    const { EmpDept }: any = useContext(props.MyContext);

    const { EmpName }: any = useContext(props.MyContext);

    const { EmpData } = useContext(props.MyContext);

    const [CurrentPage, setCurrentPage] = useState(1);

    const [TotalPage, setTotalPage] = useState(0);

    const [GetAlertId, setGetAlertId] = useState("1");


    const DeleteEmp = async (id: any) =>
    {
        setDeleteState("");
        try
        {
            console.log(id);
            let response = await fetch(`http://localhost:3065/deleteStudent?id=${id}`);
            let result = await response.json();
            console.log(result);
            result === "OK" ? message.success("Success") : message.error("Error");
            return setDeleteState(result);
        }
        catch (e)
        {
            console.error(e);
        }
    };

    useEffect(() =>
    {
        const GetEmpData = (async () =>
        {
            let res = await fetch('http://localhost:3065/getStudent');
            let result = await res.json();
            EmpData[1](result);
        })();
        // const GetTotalPage = (async () =>
        // {
        //     let response = await fetch('http://localhost/PHP_Pro01/React_Pro01/GetTotalPage.php');
        //     return setTotalPage(await response.json());
        // })();

    }, [NewEmpState[0], AlertState[0]]);

    const OnPageChange = (e: any) =>
    {
        return setCurrentPage(e);
    };

    return (
        <ContentTable>
            <NewEmployee NewEmpState={NewEmpState} />
            <AlertEmployee AlertState={AlertState} GetAlertId={[GetAlertId, setGetAlertId]} />
            <MyTable>
                <thead>
                    <tr>
                        <MyTh>ID</MyTh>
                        <MyTh>Name</MyTh>
                        <MyTh>Gender</MyTh>
                        <MyTh>BirthDay</MyTh>
                        <MyTh>ClassRoom</MyTh>
                        <MyTh>Hobbit</MyTh>
                        <MyTh>Option</MyTh>
                    </tr>
                </thead>
                <tbody>
                    {
                        EmpData[0].map((item: any, index: number) =>
                        {
                            return (
                                <MyTableRow
                                    key={index}
                                    item={item}
                                    DeleteEmp={DeleteEmp}
                                    AlertState={AlertState}
                                    GetAlertId={[GetAlertId, setGetAlertId]}
                                />
                            );
                        })
                    }

                </tbody>
            </MyTable>
            {
                TotalPage ? <Pagination onChange={OnPageChange} defaultCurrent={CurrentPage} total={TotalPage * 10} style={{ float: 'right', marginTop: "20px" }} /> : null
            }

        </ContentTable >
    );
}
